<template>
	<div>
		<wd-header title="个人中心">
	        <span class="iconfont" @click="goback" slot="left">&#xe697;</span>
		</wd-header>
		
		<div class="content">
			<ul>
				<router-link tag="li" :to="{name:'mypoints'}">
					<div class="left">
						<span class="iconfont jifen">&#xe62b;</span>
						<i>我的积分</i>
					</div>
					<div class="right">
						<i>{{points}}</i>
						<span class="iconfont ">&#xe6a8;</span>
					</div>
				</router-link>
				<router-link tag="li" :to="{name:'mycollections'}">
					<div class="left">
						<span class="iconfont shoucang">&#xe644;</span>
						<i>我的收藏</i>
					</div>
					<div class="right">
						<span class="iconfont ">&#xe6a8;</span>
					</div>
				</router-link>
				<router-link tag="li" :to="{name:'invitefriends'}">
					<div class="left">
						<span class="iconfont jiangli">&#xe657;</span>
						<i>邀请奖励</i>
					</div>
					<div class="right">
						<span class="iconfont ">&#xe6a8;</span>
					</div>
				</router-link>
				<router-link tag="li" :to="{name:'aboutus'}">
					<div class="left">
						<span class="iconfont guanyu">&#xe62a;</span>
						<i>关于我们</i>
					</div>
					<div class="right">
						<span class="iconfont ">&#xe6a8;</span>
					</div>
				</router-link>
				<router-link tag="li" :to="{name:'recommend'}">
					<div class="left">
						<span class="iconfont jianyi">&#xe607;</span>
						<i>建议反馈</i>
					</div>
					<div class="right">
						<span class="iconfont ">&#xe6a8;</span>
					</div>
				</router-link>
				<router-link tag="li" :to="{name:'settings'}">
					<div class="left">
						<span class="iconfont shezhi">&#xe60c;</span>
						<i>设置</i>
					</div>
					<div class="right">
						<span class="iconfont ">&#xe6a8;</span>
					</div>
				</router-link>
			</ul>
		</div>

		<!-- <div class="footer">
			<span class="iconfont">&#xe643;</span>
			<div class="detail">
				<h2>021-58327007</h2>
				<i>(工作时间:&nbsp;09:00-21:00)</i>
			</div>
		</div> -->

	</div>
</template>

<script>
export default {
  name: 'afterlogin',
  data () {
    return {
    	points:0,
    	auth: JSON.parse(localStorage.user),
    	pageIndex:1,
    	pointsurl:'http://www.jydsapp.com/jydsApi/api/h5/user/pointsList',
    }
  },
  created(){
  	this.getPointsData()
  },
  methods:{
  	goback(){
  		this.$router.go(-1)
  	},
  	getPointsData(){
  		let str = `{"userPhone":"${this.auth.user.phoneNum}","token":"${this.auth.token}","pageIndex":"${this.pageIndex}"}`
  		let toast = this.$Toast({
  		    content: '加载中…',
  		    iconClass: 'loader',
  		    autoClose:false
  		})
  		this.fetch({
  		    method: 'post',
  		    url: this.pointsurl,
  		    params: {
  		        "paramStr": str
  		    }
  		}).then((data) => {
  		    if (data.data.code == 200) {
  		    	toast.close()
  		        let routeinfo = JSON.parse(data.data.data)
  		        this.$store.commit('savePoints', routeinfo)  //保存积分信息到积分详情页面
  		        this.points = routeinfo.countPoints
  		    } else if (data.data.code == 103) {
  		    	toast.close()
  		        localStorage.removeItem('user')
  		        this.$Toast({
  		            content: '请重新登录'
  		        })
  		        this.$router.replace('/login')
  		    } else {
  		    	toast.close()
  		        console.log(data.data.message)
  		    }
  		}).catch((err) => {
  		    console.log(err)
  		})
  	}
  }
}
</script>

<style lang="scss" scoped>
	.content{
		li{
			display: flex;
			padding: 0.37037rem;
			align-items: center;
			justify-content:space-between;
			border-bottom:1px solid #eee;
			font-size: 0.407407rem;

			&:nth-child(1) i{
				color: #ff6633;
			}

			.jifen{
				color: #ff6633;
			}
			
			.shoucang{
				color: #24b6e9;
				font-size: 0.405rem;
			}
			
			.jiangli{
				color: #ff8d2a;
			}

			.guanyu{
				color: #ffac0c;
			}

			.jianyi{
				color: #f7b000;
				font-size: 0.4rem;
			}

			.shezhi{
				color: #ff594b;
			}
			
			.left i{
				margin-left: 0.259259rem;
			}
			
			.right .iconfont{
				color: #555;
			}
		}
	}

	  // .footer{
	 	// 	position: absolute;
	 	// 	bottom: 20%;
	 	// 	left: 50%;
	 	// 	transform:translate(-50%,-50%);
	 	// 	display: flex;
	 	
	 	// 	.iconfont{
	 	// 		color: #9c9c9c;
	 	// 		font-size: 1rem;
	 	// 	}
	 	
	 	// 	.detail{
	 	// 		margin-left: 0.277778rem;
	 	
	 	// 		h2,i{
	 	// 			color: #292929;
	 	// 		}
	 			
	 	// 		h2{
	 	// 			font-size: 0.481481rem;
	 	// 		}
	 	
	 	// 		i{
	 	// 			font-size: 0.333333rem;
	 	// 		}
	 	// 	}
	 	// }  

	

</style>